<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Parameters
        const cx = 225;
        const cy = 220;
        const ra = 50;  // Inner radius 'a'
        const rb = 150; // Outer radius 'b'

        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';

        // --- Main Drawing ---

        // 1. Draw outer circle (solenoid cross-section)
        const mainLineWidth = 3;
        ctx.lineWidth = mainLineWidth;
        ctx.beginPath();
        ctx.arc(cx, cy, rb, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw inner circle (central rod) with hatching
        ctx.save();
        ctx.lineWidth = mainLineWidth;
        ctx.beginPath();
        ctx.arc(cx, cy, ra, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.clip();

        // Draw hatching lines inside the inner circle
        ctx.lineWidth = 2.5;
        const hatchBoxSize = ra * 1.5;
        const hatchStep = 13;
        ctx.beginPath();
        for (let pos = -hatchBoxSize; pos < hatchBoxSize * 2; pos += hatchStep) {
            ctx.moveTo(cx + pos, cy - hatchBoxSize);
            ctx.lineTo(cx - hatchBoxSize, cy + pos);
        }
        ctx.stroke();
        ctx.restore();

        // 3. Draw dimension lines and labels
        ctx.lineWidth = 2;

        // Dimension 'b' (outer radius)
        const dim_bx = cx + rb + 30;
        const dim_by_top = cy;
        const dim_by_bottom = cy + rb;
        ctx.beginPath();
        // Horizontal guide line from the bottom of the circle
        ctx.moveTo(cx, dim_by_bottom);
        ctx.lineTo(dim_bx, dim_by_bottom);
        // Vertical dimension line
        ctx.moveTo(dim_bx, dim_by_top);
        ctx.lineTo(dim_bx, dim_by_bottom);
        // Ticks
        ctx.moveTo(dim_bx - 5, dim_by_top);
        ctx.lineTo(dim_bx + 5, dim_by_top);
        ctx.moveTo(dim_bx - 5, dim_by_bottom);
        ctx.lineTo(dim_bx + 5, dim_by_bottom);
        ctx.stroke();
        // Label 'b'
        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('b', dim_bx + 10, cy + rb / 2);

        // Dimension 'a' (inner radius, shown as diameter in diagram)
        const dim_ax = cx - ra - 25;
        const dim_ay_top = cy - ra;
        const dim_ay_bottom = cy + ra;
        ctx.beginPath();
        // Vertical dimension line
        ctx.moveTo(dim_ax, dim_ay_top);
        ctx.lineTo(dim_ax, dim_ay_bottom);
        // Ticks
        ctx.moveTo(dim_ax - 5, dim_ay_top);
        ctx.lineTo(dim_ax + 5, dim_ay_top);
        ctx.moveTo(dim_ax - 5, dim_ay_bottom);
        ctx.lineTo(dim_ax + 5, dim_ay_bottom);
        ctx.stroke();
        // Label 'a'
        ctx.textAlign = 'right';
        ctx.fillText('a', dim_ax - 10, cy);

        // 4. Draw particle/charge and velocity symbols
        // Velocity label 'v' at the top
        ctx.font = 'bold italic 24px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('v', cx, cy - rb - 20);

        // Symbol for the moving charge 'q'
        const arrowEndY = cy - ra - 10;
        const arrowLength = 25;
        const arrowStartY = arrowEndY - arrowLength;
        const headLength = 10;
        ctx.lineWidth = 2.5;

        // Arrow shaft
        ctx.beginPath();
        ctx.moveTo(cx, arrowStartY);
        ctx.lineTo(cx, arrowEndY);
        ctx.stroke();

        // Arrow head (filled triangle)
        ctx.beginPath();
        ctx.moveTo(cx, arrowEndY);
        ctx.lineTo(cx - headLength * 0.6, arrowEndY - headLength);
        ctx.lineTo(cx + headLength * 0.6, arrowEndY - headLength);
        ctx.closePath();
        ctx.fill();

        // Label 'q'
        ctx.font = 'italic 24px Times New Roman';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('q', cx + 15, arrowStartY + arrowLength / 2);

        // 5. Figure Caption
        ctx.font = '20px Times New Roman';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('Fig. 2.59', cx, cy + rb + 60);

    </script>
</body>
</html>